package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/sheet"
)

templ SheetExternalTrigger() {
	// Sheet with content but no internal trigger
	@sheet.Sheet(sheet.Props{
		ID:   "external-trigger-demo",
		Side: sheet.SideRight,
	}) {
		// No trigger inside - will be triggered externally
		@sheet.Content() {
			@sheet.Header() {
				@sheet.Title() {
					External Trigger
				}
				@sheet.Description() {
					This sheet has no internal trigger
				}
			}
			<div class="flex-1 p-4">
				<p class="text-sm text-muted-foreground">
					The trigger button exists outside the Sheet component.
				</p>
			</div>
			@sheet.Footer() {
				@sheet.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Close
					}
				}
			}
		}
	}
	// External trigger outside of Sheet component
	@sheet.Trigger(sheet.TriggerProps{
		For: "external-trigger-demo",
	}) {
		@button.Button(button.Props{
			Variant: button.VariantOutline,
		}) {
			Open Sheet
		}
	}
}
